import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Modal } from 'antd';
import noImg from 'assets/no_Img.png'
import './index.styl';

function BaseInfo({ detail }) {
  const [visible, setVisible] = useState(false)
  const imgUrl = detail && detail.deviceImage ? detail.deviceImage : noImg
  return (
    <>
      <div className="detail_baseInfo">
        <div className="info_1">
          <div className="word">
            <p className="flex-p">
              <span className="title">设备名称：</span>
              <span className="content lineFeed">{detail && detail.deviceName}</span>
            </p>
            <p>
              <span>设备编号：</span>
              <span className="content">{detail && detail.deviceNo}</span>
            </p>
            <p>
              <span>设备级别：</span>
              <span className="content">{detail && detail.deviceLevelStr}</span>
            </p>
            <p>
              <span>设备类型：</span>
              <span className="content">{detail && detail.deviceTypeName}</span>
            </p>
            <p>
              <span>使用部门：</span>
              <span className="content">{detail && detail.groupName}</span>
            </p>
            <p>
              <span>责任人：</span>
              <span className="content">{detail && detail.chargePerson}</span>
            </p>
            <p>
              <span>生产日期：</span>
              <span className="content">{detail && detail.productTime}</span>
            </p>
            <p>
              <span>投产日期：</span>
              <span className="content">{detail && detail.useTime}</span>
            </p>
            <p>
              <span>使用年限：</span>
              <span className="content">{detail && detail.useYearNumber}年</span>
            </p>
            <p>
              <span>设备金额：</span>
              <span className="content">{detail && detail.price}万</span>
            </p>
            <p>
              <span>供应商：</span>
              <span className="content">{detail && detail.supplier}</span>
            </p>
          </div>
          <div className="img" onClick={() => setVisible(true)}>
            <img src={imgUrl} alt="" />
          </div>
        </div>
        <div className="info_2">
          <p>
            <span>出厂编号：</span>
            <span className="content">{detail && detail.factoryNo}</span>
          </p>
          <p>
            <span>额定功率：</span>
            <span className="content">{detail && (detail.ratePower && `${detail.ratePower}kw` || '')}</span>
          </p>
          <p>
            <span>重量：</span>
            <span className="content">{detail && (detail.weight && `${detail.weight}吨` || '')}</span>
          </p>
          <p>
            <span>外形尺寸：</span>
            <span className="content">
              <span>{detail && (detail.length && `长${detail.length}  ` || '')}</span>
              <span>{detail && (detail.width && `宽${detail.width}  ` || '')}</span>
              <span>{detail && (detail.height && `高${detail.height}  ` || '')}</span>
              <span>{(detail && detail.height || detail.width || detail.length)? '(米)' : ''}</span>
            </span>
          </p>
          <p>
            <span>设备地址：</span>
            <span className="content">{detail && detail.address}</span>
          </p>
          <p className="br">
            <span style={{ whiteSpace: 'nowrap'}}>设备描述：</span>
            <div className="content" style={{ wordWrap: 'break-word'}}>{detail && detail.remark}</div>
          </p>
          <p className="creator">
            <span>创建人：</span>
            <span className="content">{detail && detail.createdBy}</span>
          </p>
          <p>
            <span>创建时间：</span>
            <span className="content">{detail && detail.createdTime}</span>
          </p>
        </div>
        <div className="info_3">
          <p>
            <span>设备状态：</span>
            {
              detail && detail.ledgerStatus === 3 ? (
                <span style={{ color: detail.runStatusStr === '正常' ? '#3B7CFF' : '#ff4400'}}>{ detail.runStatusStr || '--'}</span>
              ) : (
                '--'
              )
            }
            
          </p>
          {
            detail && detail.ledgerStatus === 4 ? null : (
              <p style={{ display: detail && detail.runStatusStr === '正常' ? 'none' : 'block' }}>
                <span>故障原因：</span>
                <span>{detail && detail.faultReason}</span>
              </p>
            )
          }
        </div>
      </div>
      <Modal
        footer={null}
        width='7rem'
        visible={visible}
        onCancel={() => setVisible(false)}
        bodyStyle={{
          width: '7rem',
          height: '7rem'
        }}
      >
        <img src={imgUrl} alt='' style={{ width: '100%', height: '100%' }} />
      </Modal>
    </>
  );
}

BaseInfo.propTypes = {
  detail: PropTypes.object.isRequired,
};

export default BaseInfo;
